<script setup lang="ts">
import Carousel from 'primevue/carousel';
import { reactive, ref } from 'vue';
import Splitter from 'primevue/splitter';
import SplitterPanel from 'primevue/splitterpanel';
import Panel from 'primevue/panel';


const images = ref([
    'src/assets/images/c1.jpg',
    'src/assets/images/c2.jpg',
    'src/assets/images/c3.jpg',
    'src/assets/images/c4.jpg',
    'src/assets/images/c5.jpg'
]);

const hot_list = reactive([
    { name: '仙逆', code: 'AU' },
    { name: '九州异闻录', code: 'BR' },
    { name: 'China', code: 'CN' },
    { name: 'Egypt', code: 'EG' },
    { name: 'France', code: 'FR' },
    { name: 'Germany', code: 'DE' },
    { name: 'India', code: 'IN' },

])
</script>

<template>
    <Splitter layout="vertical">
        <SplitterPanel>
            <Carousel :value="images" :numVisible="1" :numScroll="1" circular :autoplayInterval="3000">
                <template #item="slotProps">
                    <img class="carousel__img" :src="slotProps.data" alt="Carousel Image">
                </template>
            </Carousel>
        </SplitterPanel>
        <SplitterPanel>
            <Panel header="热门">
                <Carousel :value="hot_list" :numVisible="5" :numScroll="2" :autoplayInterval="3000">
                    <template #item="slotProps">
                        <p>{{ slotProps.data.name }}</p>
                    </template>
                </Carousel>
            </Panel>
            <Panel header="推荐">
                <p class="m-0">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip ex
                    ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                    nulla
                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
                    anim id
                    est laborum.
                </p>
            </Panel>
        </SplitterPanel>
    </Splitter>
</template>

<style scoped>
.carousel__img {
    width: 100%;
    min-height: 300px;
    max-height: 500px;
    object-fit: cover;
}

@media screen and (min-width: 1024px) {
    .carousel__img {
        max-height: 800px;
    }
}
</style>